import React, { Component } from "react"
import { connect } from "react-redux"

class PersonUI extends Component {
  addPerson = () => {
    const name = this.username.value
    const age = this.age.value
    console.log({ name, age })
    console.log(this.props)
    this.props.addPerson({ name, age })
    this.username.value = this.age.value = ""
  }
  render() {
    return (
      <div>
        <h1>person组件</h1>
        <h4>count组件求和为{this.props.count}</h4>
        <input
          type="text"
          ref={(c) => (this.username = c)}
          placeholder="请输入名字"
        />
        <input
          type="text"
          ref={(c) => (this.age = c)}
          placeholder="请输入年龄"
        />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {this.props.person.map((p) => {
            return (
              <li key={p.name}>
                {p.name}----{p.age}
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}
export default connect(
  (state) => ({
    ...state,
  }),
  {
    //一般写法
    addPerson: (person) => (dispatch) =>
      dispatch({ type: "add_person", data: person }),
  }
)(PersonUI)
